<template>
  <div class="home">
    <div class="stage">
      <div class="heart" :class=" aixin ? 'is-active': '' "></div>
    </div>
    <div class="head">
      <div class="head-top">
          <svg class="icon index-icon" aria-hidden="true" @click="goToAside()">
            <use xlink:href="#icon-cebianlanzhankai"></use>
          </svg>
        <div class="top-right-corner">
          <svg class="icon index-icon" aria-hidden="true" @click=goTosSearch()>
            <use xlink:href="#icon-sousuo"></use>
          </svg>
        </div>
      </div>
      <div class="photo-list">
        <div class="slogan">
          <p style="font-size:30px; font-weight:bold">ADOPT</p>
          <p style="font-size:22px; font-weight:bold">DON'T SHOP</p>
          <span style="font-size:12px;margin-top:10px">Come and join us</span>
        </div>
      </div>
        <ul class="type-list">
          <li class="type" v-for="(item,index) in kind" :key="index" @click="selectKind(item.name,index)">
            <svg class="icon index-icon" aria-hidden="true">
              <use :xlink:href=item.svg></use>
            </svg>
            <span>{{item.chinese}}</span>
          </li>
        </ul>
    </div>
    <div class="adopt-agency">
      <div class="adopt-agency-title">
        <p class="title">领养机构</p>
        <svg class="icon index-icon" aria-hidden="true"  @click="gotoAgencyList()">
              <use xlink:href="#icon-qita1"></use>
        </svg>
      </div>
      <ul class="agency-list">
        <li class="agency-info" v-for="(agency,index) in agencyList.slice(0, 4)" :key="index">
          <div class="agency" @click="gotoAgency(agency.aid)">
            <img :src="agency.profile" 
              alt="" class="agency-img">
            <div class="agency-basic-info">            
              <div class="agency-title">              
                <p>{{agency.real_name}}</p>
                <svg class="icon index-icon love grey" aria-hidden="true" v-show="agency.status === 2 " @click.stop="dianzan(index,agency.status,agency.aid)">
                    <use xlink:href="#icon-shoucang1"></use>
                </svg>
                <svg class="icon index-icon love" aria-hidden="true" v-show="agency.status === 1 " @click.stop="dianzan(index,agency.status,agency.aid)">
                    <use xlink:href="#icon-aixin1"></use>
                </svg>
              </div>          
              <p>有几只宠物</p>
            </div> 
          </div>         
        </li>       
      </ul>     
    </div>
    <div class="pet-star">
        <p class="title recommend">推选</p>
        <div class="pet-list">
          <div class="pet-info" v-for="(pet,index) in petList.slice(0, 6)" :key="index">
            <div class="pet"  @click="gotoPet(pet.id)">          
              <img 
                :src="pet.profile"
                alt="" class="pet-img">            
              <div class="pet-basic-info">
                <div class="pet-title">
                  <p>{{pet.pname}}</p>
                  <svg class="icon index-icon gender" aria-hidden="true" v-if="pet.gender === 'male'">
                    <use xlink:href="#icon-nv"></use>
                  </svg>
                  <svg class="icon index-icon gender" aria-hidden="true" v-if="pet.gender === 'female'">
                    <use xlink:href="#icon-nan"></use>
                  </svg>
                </div>
                <p>年龄：{{pet.age}}</p>
                <p>{{pet.reason}}</p>
                <p>来自 {{pet.belong}}</p>
              </div>    
            </div>       
          </div>
        </div>
    </div>
  </div>
</template>

<script>

import {getpetInfo,getAgencyInfo,updateLike} from '@/api.js'
export default {
  name: "Home",
  components: {
  },
  data() {
    return{
      aixin:false,
      like:false,
      petList:[],
      agencyList:[],
      kind:[
        {name:'Dog',svg:'#icon-gou1',chinese:'狗'},
        {name:'Cat',svg:'#icon-mao',chinese:'猫'},
        {name:'Bird',svg:"#icon-xiaoniao1",chinese:'鸟'},
        {name:'Rabbit',svg:"#icon-tuzi",chinese:'兔'}
      ]
    }
  },
  created() {
    this.getPetInfo()
    this.getAgencyInfo()
  },
  watch: {
    aixin:{
    handler(newVal) {
          if(newVal){
            setTimeout(() => {
            this.aixin = false;
          },1200)
        }
      },   
    immediate:true
    }
  },
  methods:{
    //点赞 
      async dianzan(index,status,aid) {
      if (status === 1){ 
        this.agencyList[index].status =2; 
        this.aixin = false 
      }else if(status === 2){ 
        this.agencyList[index].status =1; 
        this.aixin = true 
        }
      let params = {aid,user_id:JSON.parse(localStorage.getItem('user')),status:this.agencyList[index].status}
      const { data } =await updateLike(params)
      console.log(data)
    },
    //跳转到种类页页面
    selectKind(name,index){
      this.$router.push(`/kind/${name}/${index}`)
    },
    gotoOther() {
      this.$router.push('/kind')
    },
    gotoAgencyList() {
      this.$router.push('/agency_list')
    },
    goToAside() {
      this.$router.push('/aside')
    },
    getPetInfo() {     
      getpetInfo({'isExist':false}).then( res => {
        this.petList = res.data
      })
    },
    async getAgencyInfo() {
      let params = {user_id:JSON.parse(localStorage.getItem('user'))}
      await getAgencyInfo(params).then( res => {
        this.agencyList = res.data
      })
    },
    goTosSearch() {
      this.$router.push('/search')
    },

   //跳转到机构详情页
   gotoAgency(aid) {
     this.$router.push('/agency/'+aid)
   } ,
   gotoPet(id){
     this.$router.push('/pet/'+id)
   },
   gotoSearch() {
     this.$router.push('/search')
   }     
  }
  }
</script>
<style lang="less" scoped>
.home{
  width:100%;
  height: 100%;
  padding:0.5rem;
  overflow-y:auto;
  

.stage {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  .heart {
      width: 100px;
      height: 100px;
      background: url("https://cssanimation.rocks/images/posts/steps/heart.png") no-repeat;
      background-position: 0 0;
      opacity: 0;
    }
    
    .is-active {
      opacity: 1;
      background-position: -2800px 0;
      transition: background-position 1s steps(28);
    }
}
  .head{
    .head-top{
      display: flex;
      justify-content: space-between;
      .top-right-corner{
        display: flex;
        align-items: center;
      }
    }
    .photo-list{
      position: relative;
      width: 100%;
      height: 4.3rem;
      background:url('../assets/images/pet/cat22.jpg') no-repeat -4.5rem;
      border-radius: 0.25rem;
      margin:0.25rem 0;
      .slogan{
        position: absolute;
        color:white;
        display: flex;
        flex-direction: column;
        padding:0.25rem;
        bottom:0;
      }
    }
    .type-list{
      display: flex;
      justify-content: space-around;
      li{
        display: flex;
        flex-direction: column;
        text-align: center;
      }
    }
  }
  .adopt-agency{
    margin:0.25rem 0px;
    width: 100%;
    .adopt-agency-title{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .agency-list{
      width: 100%;
      display: flex;
      overflow-y: hidden;
      .agency{
        width: 4rem;
        height: 4rem;
        margin-right: 0.25rem;
        flex-shrink:0;
        .agency-img{
          width: 4rem;
          border-radius: 0.15rem;
        }
        .agency-basic-info{
          padding: 0.25rem 0.15rem;
          font-size: 0.3rem;
          color: #a09ea0;
          .agency-title{
            font-size: 0.4rem;
            color: #38383b;
            display: flex;
            justify-content: space-between;
            font-weight:bold;
            height: 0.5rem;
            @keyframes hovermove {
              from {height: 0;}
              to {height: 1.3em;}
            }
            .love{
              height: 1.3em;
              animation: hovermove 0.3s;
            }
            .grey{
                height: 1.5em;
                margin-top: -0.04rem;
                animation: hovermove 0.3s;
            }
          }
        }
        
      }
    }
  }
  .pet-star{
    position: relative;
    overflow:hidden;
      .recommend {
        position:absolute;
        background: white;
        height: 1rem;
        width:100%;     
      }
      .pet-list{
        margin-top:1rem;
        height: 10rem;
        overflow-y: auto;
        overflow-x: hidden;
        .pet{
          display: flex;
          height: 3rem;
          margin-bottom: 0.4rem;
          .pet-img{
            border-radius: 7%;
            width: 4.3rem;
          }
          .pet-basic-info{
            color: #a09ea0;
            font-size: 0.3rem;
            padding: 0.25rem;
            flex:1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .pet-title {
              color: #38383b;
              font-size: 0.4rem;
              display: flex;
              justify-content: space-between;
              font-weight: bold;
              .gender {
                width: 0.5rem;
                height: 1.5em;
              }
            }
          }
        }
      }
      
  }
  .index-icon{
    width: 0.8rem;
  }
  .title{
    font-size: 0.45rem;
    font-weight: bold;
    color: #333333;
  }
}
</style>
